<p-panel header="Tags">
    <p-table [columns]="cols" [value]="features" selectionMode="single" (onRowSelect)="onRowSelect($event)" [paginator]="true" [responsive]="true" [rows]="15">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    
        <ng-template pTemplate="summary" let-rowData>
            <div style="text-align:left">
                <button type="button" pButton icon="fa fa-plus" (click)="showDialogToAdd()" label="Add"></button>
            </div>
        </ng-template>
        
    </p-table>
    
    <p-dialog header="Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" [width]="300">
        <div class="ui-g ui-fluid" *ngIf="feature">
            <div class="ui-g-12">
                <div class="ui-g-4">
                    <label>Name</label>
                </div>
                <div class="ui-g-8">
                    <input pInputText id="name" [(ngModel)]="feature.name" />
                </div>
            </div>
            <div class="ui-g-12">
                <div class="ui-g-4">
                    <label>Description</label>
                </div>
                <div class="ui-g-8">
                    <input pInputText id="description" [(ngModel)]="feature.description" />
                </div>
            </div>
        </div>
        <p-footer>
            <div class="ui-dialog-buttonpane ui-helper-clearfix">
                <button *ngIf="!newFeature" pButton icon="fa fa-close" (click)="delete()" label="Delete"></button>
                <button pButton icon="fa fa-check" (click)="save()" label="Save"></button>
            </div>
        </p-footer>
    </p-dialog>
</p-panel>

<p-growl [(value)]="msgs"></p-growl>